<template>
	<view class="page-bg">
		<view class="c-banner">
			<image src="../../static/images/hs/dao-banner.png" mode="widthFix"></image>
		</view>
		<view class="c-panel">
			<view class="c-panel_hd">导管分类</view>
			<view class="cath-card" @click="show1 = true">
				<image class="cath-icon" src="../../static/images/catheter/icon1.png" mode=""></image>
				<view class="flex_bd">
					<view class="cath-title"><text>动脉、静脉类导管</text></view>
					<view class="cath-desc">动脉、静脉类导管均用于置入血管，血液属于循环系统。</view>
				</view>
			</view>
			<view class="cath-card">
				<image class="cath-icon" src="../../static/images/catheter/icon2.png" mode=""></image>
				<view class="flex_bd">
					<view class="cath-title"><text>呼吸类导管</text></view>
					<view class="cath-desc">动脉、静脉类导管均用于置入血管，血液属于循环系统。</view>
				</view>
			</view>
			<view class="cath-card">
				<image class="cath-icon" src="../../static/images/catheter/icon3.png" mode=""></image>
				<view class="flex_bd">
					<view class="cath-title"><text>引流类导管</text></view>
					<view class="cath-desc">动脉、静脉类导管均用于置入血管，血液属于循环系统。</view>
				</view>
			</view>
			<view class="cath-card">
				<image class="cath-icon" src="../../static/images/catheter/icon4.png" mode=""></image>
				<view class="flex_bd">
					<view class="cath-title"><text>排泄类导管</text></view>
					<view class="cath-desc">动脉、静脉类导管均用于置入血管，血液属于循环系统。</view>
				</view>
			</view>
			<view class="l-footer">
				<u-button @click="" type="primary" :custom-style="btnStyle" @click="show2 = true">查看全部</u-button>
			</view>
		</view>
		<u-modal v-model="show" title="标签打印" :title-style="titleStyle" :show-confirm-button="false" width="58.5%"
		 border-radius="30">
			<view class="slot-content">
				<view class="info-group">
					<view class="info-group-item">
						<view class="info-label">患者名字</view>
						<view class="info-val">姜轮</view>
					</view>
					<view class="info-group-item">
						<view class="info-label">住院床号</view>
						<view class="info-val">A1床</view>
					</view>
					<view class="info-group-item">
						<view class="info-label">住院号</view>
						<view class="info-val">47887942</view>
					</view>
					<view class="info-group-item">
						<view class="info-label">导管名称</view>
						<view class="info-val">PICC管</view>
					</view>
					<view class="info-group-item">
						<view class="info-label">导管位置</view>
						<view class="info-val">外10cm</view>
					</view>
				</view>
				<view class="info-time">
					2020年11月07日12:12彭于晏
				</view>
			</view>
			<view class="slot-footer">
				<button type="default" class="btn cancel-btn" @click="cancel">取消</button>
				<button type="default" class="btn confirm-btn" @click="confirm">确定</button>
			</view>
		</u-modal>
		<u-modal v-model="show1" title="动脉导管" :title-style="titleStyle" :show-confirm-button="false" width="510rpx"
		 border-radius="30">
			<view class="md-row">
				<view class="md-col flex-center">
					<view class="md-label">
						动脉导管
					</view>
					<view class="md-bd flex_bd">
						<u-radio-group v-model="value" width="130rpx">
							<u-radio @change="radioChange" v-for="(item, index) in list" :key="index" :name="item.name" :disabled="item.disabled">
								{{item.name}}
							</u-radio>
						</u-radio-group>
					</view>
				</view>
				<view class="md-col flex-center">
					<view class="md-label">
						有效期
					</view>
					<view class="md-bd flex_bd">
						<input type="text" v-model="day" placeholder="请输入" class="form-control" />
					</view>
					<view class="md-ft">天</view>
				</view>
				<view class="md-col flex-center">
					<view class="md-label">
						内置
					</view>
					<view class="md-bd flex_bd">
						<input type="text" v-model="inset" placeholder="请输入" class="form-control" />
					</view>
					<view class="md-ft">CM</view>
				</view>
				<view class="md-col flex-center">
					<view class="md-label">
						臂围
					</view>
					<view class="md-bd flex_bd">
						<input type="text" v-model="arm" placeholder="请输入" class="form-control" />
					</view>
					<view class="md-ft">CM</view>
				</view>
				<view class="md-col flex-center">
					<view class="md-label">
						深度
					</view>
					<view class="md-bd flex_bd">
						<input type="text" v-model="deep" placeholder="请输入" class="form-control" />
					</view>
					<view class="md-ft">CM</view>
				</view>

			</view>
			<view class="slot-footer">
				<button type="default" class="btn cancel-btn" @click="show1 = false">取消</button>
				<button type="default" class="btn confirm-btn" @click="show1 = false">提交</button>
			</view>
		</u-modal>
		<u-popup v-model="show2" mode="bottom" border-radius="30" :closeable="true" close-icon="close-circle" close-icon-size="42"
<<<<<<< HEAD
		 close-icon-color="#929ca0" >
=======
		 close-icon-color="#929ca0">
>>>>>>> b8e41f2f03eb2ad2d26ffb6fa591ba98c3b6b2c9
			<view class="popup-head">
				<view class="popup-title">导管列表</view>
			</view>
			<view class="popup-body">
				<u-search placeholder="请输入导管类型" v-model="search" shape="square" :show-action="false" input-align="center"
				 search-icon="" :input-style="inputStyle" height="80" bg-color="#ebf0f2"></u-search>
			</view>
			 <scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y">
				<view class="popup-cells">
					<view class="popup-cell flex-center">
						<view class="popup-cell__hd">
							<image src="../../static/images/beHospital/dg1.png" mode=""></image>
						</view>
						<view class="popup-cell__bd flex_bd">
							<view class="popup-info">
								<view class="name">动脉导管</view>
								<view class="number">使用量：<text class="blue">2</text></view>
							</view>
						</view>
					</view>
					<view class="popup-cell flex-center">
						<view class="popup-cell__hd">
							<image src="../../static/images/beHospital/dg2.png" mode=""></image>
						</view>
						<view class="popup-cell__bd flex_bd">
							<view class="popup-info">
								<view class="name">气切导管</view>
								<view class="number">使用量：<text class="blue">2</text></view>
							</view>
						</view>
					</view>
					<view class="popup-cell flex-center">
						<view class="popup-cell__hd">
							<image src="../../static/images/beHospital/dg3.png" mode=""></image>
						</view>
						<view class="popup-cell__bd flex_bd">
							<view class="popup-info">
								<view class="name">鼻胆管</view>
								<view class="number">使用量：<text class="blue">2</text></view>
							</view>
						</view>
					</view>
					<view class="popup-cell flex-center">
						<view class="popup-cell__hd">
							<image src="../../static/images/beHospital/dg4.png" mode=""></image>
						</view>
						<view class="popup-cell__bd flex_bd">
							<view class="popup-info">
								<view class="name">鼻空肠管</view>
								<view class="number">使用量：<text class="blue">2</text></view>
							</view>
						</view>
					</view>
					<view class="popup-cell flex-center">
						<view class="popup-cell__hd">
							<image src="../../static/images/beHospital/dg1.png" mode=""></image>
						</view>
						<view class="popup-cell__bd flex_bd">
							<view class="popup-info">
								<view class="name">动脉导管</view>
								<view class="number">使用量：<text class="blue">2</text></view>
							</view>
						</view>
					</view>
					<view class="popup-cell flex-center">
						<view class="popup-cell__hd">
							<image src="../../static/images/beHospital/dg2.png" mode=""></image>
						</view>
						<view class="popup-cell__bd flex_bd">
							<view class="popup-info">
								<view class="name">气切导管</view>
								<view class="number">使用量：<text class="blue">2</text></view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
			
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				btnStyle: {
					background: '#009fe8',
					color: '#ffffff',
					height: '98rpx',
					fontSize: '30rpx',
					borderRadius: "90rpx"
				},
				show: true,
				titleStyle: {
					color: '#373b4f',
					fontSize: '30rpx',
					backgroundColor: '#ebf0f2',
					padding: '24rpx',
				},
				show1: false,
				day: '',
				inset: '',
				arm: '',
				deep: '',
				list: [{
						name: '天',
						disabled: false
					},
					{
						name: '小时',
						disabled: false
					},
				],
				value: '天',
				show2: false,
				search: '',
				inputStyle: {
					fontSize: '30rpx'
				}
			}
		},
		onLoad() {

		},
		methods: {
			cancel() {
				this.show = false
			},
			confirm() {
				this.show = false
			},
			// 选中某个单选框时，由radio时触发
			radioChange(e) {
				// console.log(e);
			},
			// 选中任一radio时，由radio-group触发
			radioGroupChange(e) {
				// console.log(e);
			}
		}
	}
</script>

<style lang="scss">
	.l-footer {
		padding: 0 40rpx;
		margin-top: 60rpx;
	}

	.cath-card {
		display: flex;
		align-items: center;
		border-radius: 6px;
		padding: 30rpx 36rpx;
		background-color: #FFFFFF;
		margin-bottom: 30rpx;
		color: #373b4f;

		.cath-title {
			position: relative;
			margin-bottom: 10rpx;
			display: inline-block;

			text {
				position: relative;
				z-index: 2;
				font-size: 32rpx;
			}

			&::after {
				content: '';
				width: 100%;
				height: 12rpx;
				position: absolute;
				left: 0;
				bottom: 0;
				background-color: #d2e9ff;
			}
		}

		.cath-desc {
			opacity: .6;
			font-size: 24rpx;
		}

		.cath-icon {
			display: block;
			width: 120rpx;
			height: 120rpx;
			border-radius: 100rpx;
			margin-right: 30rpx;
		}
	}

	.c-panel_hd {
		margin-bottom: 20rpx;
		font-size: 34rpx;
	}

	.page-bg {
		min-height: 100vh;
		background-color: #f8f8f8;
		padding: 20rpx 30rpx;
	}

	.c-banner {
		font-size: 0;
		margin-bottom: 30rpx;
	}

	.c-banner image {
		width: 690rpx;
	}

	.info-group {
		padding: 20rpx 0;

		.info-group-item {
			font-size: 26rpx;
			line-height: 60rpx;
			color: #373b4f;
			display: flex;
			align-items: center;

			.info-label {
				width: 186rpx;
				opacity: 0.6;
			}
		}
	}

	.info-time {
		font-size: 24rpx;
		color: #009fe8;
		line-height: 1;
	}

	.slot-content {
		padding: 20rpx 52rpx;
	}

	.slot-footer {
		padding: 30rpx 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;

		.btn {
			margin: 0 20rpx;
			width: 160rpx;
			color: #fff;
			font-size: 30rpx;
			background-color: #c4d0d6;
			border-radius: 10rpx;
			height: 60rpx;
			line-height: 60rpx;
		}

		.btn::after {
			display: none;
		}

		.confirm-btn {
			background-color: #009fe8;
		}
	}

	.md-row {
		padding: 30rpx 30rpx 20rpx;
	}

	.md-col {
		margin-bottom: 20rpx;

		.md-label {
			font-size: 30rpx;
			color: #373b4f;
			line-height: 60rpx;
			width: 170rpx;
		}

		.form-control {
			font-size: 30rpx;
			height: 60rpx;
			border: 1rpx solid #dee9ee;
			border-radius: 12rpx;
			padding-left: 30rpx;
		}

		.md-ft {
			font-size: 30rpx;
			color: #373b4f;
			margin-left: 10rpx;
			width: 70rpx;
		}
	}

	.md-col:last-child {
		margin-bottom: 0;
	}
	.scroll-Y{
		height: 840rpx;
	}
	.popup-head {
		background-color: #ebf0f2;
		padding: 30rpx;

		.popup-title {
			font-size: 32rpx;
			color: #373b4f;
			line-height: 40rpx;
		}
	}
	.popup-body{
		padding: 30rpx 30rpx 0 30rpx;
	}
	.popup-cells {
		padding: 30rpx;
		.popup-cell {
			margin-bottom: 40rpx;
			&:last-child{
				margin-bottom: 0;
			}
		}
		.popup-cell__hd {
			width: 142rpx;
			height: 120rpx;
			margin-right: 30rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.popup-info {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.name {
				font-size: 30rpx;
				color: #373b4f;
			}

			.number {
				font-size: 30rpx;
				color: #373b4f;
			}

			.blue {
				color: #009fe8;
			}
		}

	}
</style>
